@mixin common() {
  @apply outline-none bg-slate-50;
}

.container {
  display: flex;
  box-sizing: border-box;

  .left {
    display: flex;
    flex-direction: column;
    height: 100%;

    .list {
      flex: 1;
      overflow: auto;

      &::-webkit-scrollbar {
        display: none;
      }

      .item {
        display: block;
        color: #262626;
        padding: 0 10px;
        line-height: 40px;
        box-sizing: border-box;
        cursor: pointer;
      }
      .contextMenu{
        box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
        background: #fff;
        z-index: 1000;
        width: 120px;
        .contextMenuItem{
          //color: red;
          color: #262626;
          padding: 5px 10px;
          cursor: pointer;

          &:hover {
            background: #EFF0F0;
          }
        }
      }

      .active {
        background: #EFF0F0;
        color: #262626;
        font-weight: bold;

      }
    }

    .nav {
      height: 50px;
      display: flex;
      box-sizing: border-box;
      padding: 0 10px;
      align-items: center;
      @apply border-t;
    }
  }


  textarea {
    @include common();
    &::-webkit-scrollbar {
      display: none;
    }
    resize: none;
    padding: 0.5em;
  }
  .highlightBox{
    &::-webkit-scrollbar {
      display: none;
    }
  }
}
